<!doctype html>
<html lang="en" style='font-size:16px;'>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<style type="text/css">
			body,
			html,
			#container {
				width: 100%;
				height: 100%;
				margin: 0px
			}
		</style>
		<style type="text/css">
			.headTop {
				position: fixed;
				z-index: 99;
				top: 15px;
				display: flex;
				width: 100vw;
				padding: 0 10px;
				box-sizing: border-box;
				align-items: center;
				justify-content: space-between;
			}

			.left_city {
				width: 5.63rem;
				height: 2.5rem;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
				border-radius: 4px;
				opacity: 0.9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				box-sizing: border-box;
			}

			#clickMe {
				position: relative;
			}

			.left_city>span {
				font-size: 14px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #7A8AAA;
			}

			.left_city>img {
				width: 10px;
				height: 6px;
			}

			.cityChange {
				position: absolute;
				top: 44px;
				width: 5.63rem;
				background-color: #fff;
				border-radius: 4px;
				overflow: hidden;
				height: 0;
			}

			.cityChange .type {
				padding-left: 10px;
				height: 30px;
				font-size: 14px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				/* color: #333333; */
				color: #7A8AAA;
				line-height: 30px;
			}

			.right_btn {
				display: flex;
				align-items: center;
				position: relative;
			}

			.right_btn .right1_box {
				width: 5.63rem;
				height: 2.5rem;
				height: 40px;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
				border-radius: 4px;
				opacity: 0.9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				box-sizing: border-box;
				position: relative;
			}

			.right_btn .right1 #right1_type {
				position: absolute;
				top: 44px;
				/* left: 0; */
				width: 90px;
				/* width: 100%; */
				background: #FFFFFF;
				border-radius: 4px;
				overflow: hidden;
				height: 0;
			}

			#right1_type .type {
				/* text-align: center; */
				padding-left: 10px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				/* color: #333333; */
				color: #7A8AAA;
			}

			.right_btn .right1 span {
				font-size: 14px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				/* color: #333333; */
				color: #7A8AAA;
			}

			.right_btn .right1 img {
				width: 10px;
				height: 6px;
			}

			.right_btn .right2 {
				margin-left: 6px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				box-sizing: border-box;
				width: 6.25rem;
				height: 2.5rem;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
				border-radius: 4px;
			}

			.right_btn .right2 img {
				width: 0.88rem;
				height: 0.88rem;
			}

			.right_btn .right2 span {
				font-size: 14px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #7A8AAA;
			}



			.topFixList {
				position: absolute;
				right: 0;
				z-index: 3;
				top: 44px;
				height: 0px;
				overflow: hidden;
				width: 6.25rem;
				background: #FFFFFF;
				box-shadow: 0rem 0rem 0rem rgba(0, 0, 0, 0.08);
				border-radius: 4px;
			}

			.topFixList ul {
				height: 230px;
				overflow: auto;
				/* padding: 0; */
				padding: 10px 0;
				box-sizing: border-box;
				margin: 0;
			}

			li {
				font-size: 14px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #7A8AAA;
				padding-left: 10px;
				padding-bottom: 10px;
			}

			.rightFix {
				position: fixed;
				bottom: 30px;
				right: 14px;
				z-index: 99;
			}

			.rightFix .rightPart1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.rightPart1 .part1,
			.part2,
			.part3 {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.rightPart1 .part1 {
				width: 30px;
				height: 34px;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
				border-radius: 4px;
				margin-bottom: 4px;
			}

			.part1 img {
				width: 1rem;
				height: 1rem;
			}

			.rightPart1 .part2 {
				width: 30px;
				height: 34px;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
				border-radius: 4px;
			}

			.part2 img {
				width: 1rem;
				height: 3px;
			}

			/* .rightPart1 .part2 {
				height: 47px;

			}

			.rightPart1 .part3 {
				height: 47px;
				border-top: 1px solid #E0E0E0;
			}
 */
			/* .rightPart1 img {
				width: 16px;
			} */

			.rightFix .rightPart2 {
				margin-top: 10px;
				width: 45px;
				/* height: 93px; */
				background: #FFFFFF;
				border-radius: 28px;
				border: 1px solid #E0E0E0;
				overflow: hidden;
			}

			.rightPart2 .part1 {
				height: 47px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.rightPart2 .part2 {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 47px;
			}

			.rightPart2 img {
				width: 24px;
				height: 24px;
			}

			.botFix {
				position: fixed;
				z-index: 99;
				bottom: 30px;
				left: 10px;
				/* width: 150px;
				height: 22px; */
				/* background: rgba(0, 0, 0, .2); */
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 5px;
				box-sizing: border-box;
			}

			.botFix .type1Icon {
				width: 12.75rem;
				height: 2.13rem;
			}

			.botFix .type2Icon {
				width: 13.63rem;
				height: 3.5rem;
				display: none;
			}

			.botFix .botFix_part {
				display: flex;
				align-items: center;

			}

			.botFix_part .dian {
				width: 9px;
				height: 9px;
				background: #4EA1FF;
				border-radius: 50%;
			}

			.botFix_part .tx1 {
				font-size: 12px;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				/* color: #333333; */
				color: #7A8AAA;
			}


			.col2 {
				background: #FF806C !important;
			}

			.col3 {
				background: #94A5C7 !important;
			}

			.bulr {
				background-color: #007AFF;
			}

			.iconText {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.iconText .icontx1 {
				font-size: 11px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				margin-bottom: 2px;
				padding: 0 0.25rem;
			}

			.iconText img {
				width: 1.04rem;
				height: 1.71rem;
			}

			.iconText2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.iconText2 img {
				width: 1.44rem;
				height: 1.44rem;
			}

			.iconText2 .icontx1 {
				font-size: 11px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				margin-bottom: 2px;
				padding: 0 0.25rem;
				border-radius: 2px;
				background: #EEF0F6;
			}

			.nan {
				background: #EEF0F6;
				border: 1px solid #4EA1FF;
				color: #4EA1FF;
			}

			.hong {
				background: #EEF0F6;
				border: 1px solid #FF806C;
				border-radius: 2px;
				color: #FF806C;
			}

			.hui {
				background: #EEF0F6;
				border: 1px solid #94A5C7;
				border-radius: 2px;
				color: #94A5C7;
			}

			.zcIcon {
				border: 1px solid #00FF00;
				border-radius: 2px;
				color: #00FF00;
			}

			.lIcon {
				border: 1px solid #E9DA4A;
				color: #E9DA4A;
			}

			.right_btn1 {
				display: none;
			}

			.iconList {
				position: absolute;
				right: 0;
				z-index: 2;
				top: 44px;
				padding-top: 10px;
			}

			.iconList .icon {
				margin-bottom: 10px;
				width: 2.5rem;
				height: 2.5rem;
				background: #FFFFFF;
				box-shadow: 0rem 0rem 6px rgba(0, 0, 0, 0.08);
				opacity: 1;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.iconList .icon img {
				width: 23px;
				height: 23px;
			}

			.right2Type img {
				width: 10px !important;
				height: 7px !important;
			}

			.loading {
				position: fixed;
				z-index: 99;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100px;
				height: 100px;
				display: none;
				align-content: center;
				justify-content: center;
			}

			.loading img {
				width: 60px;
				height: 60px;
			}

			.uiLi li {
				/* padding: 10px 0 !important; */
				padding-top: 10px;
				padding-bottom: 10px;
			}
		</style>
		<title>地图</title>
	</head>

	<body>
		<div class='headTop'>
			<div class="" id='clickMe'>
				<div class='left_city' onclick='TapchangeCity()'>
					<span class='city_text'>徽州区</span>
					<img src="./picture/26.png">
				</div>
				<div class='cityChange'>
					<div class='type' id='TypeQG' onclick='TypeQG()'>
						全国
					</div>
					<div class='type' id='TypeHZ' onclick='TypeHZ()'>
						徽州区
					</div>
				</div>
			</div>
			<div class="right_btn">
				<!-- 徽州区的厂界于排口 -->
				<div class='right1'>
					<div class='right1_box' onclick='selectType()'><span class='text'>厂界</span>
						<img src="./picture/26.png">
					</div>
					<div id='right1_type'>
						<div class='type' id='TypeCJ' onclick='TypeCJ()'>
							厂界
						</div>
						<div class='type' id='TypePK' onclick='TypePK()'>
							排口
						</div>
					</div>
				</div>
				<!-- 徽州区的厂界列表 -->
				<div class='right2' onclick='openList()'>
					<img src="./picture/1065.png">
					<span class='QYtext'>企业列表</span>
				</div>
				<div class='topFixList'>
					<ul id='ul'>
						<li onclick='selectCompany()'>恒隆</li>
					</ul>
				</div>
				<!-- 全国数据的环境列表 -->
				<div class='right2 right2Type' onclick='openQGList()' style='display: none;'>
					<span class='QGtext'>AQI</span>
					<img src="./picture/26.png">
				</div>
				<div class='topFixList'>
					<ul id='ul' class='uiLi'>
						<li onclick='selectHJ("aqi")'>AQI</li>
						<li onclick='selectHJ("pm2_5")'>
							PM <sub>2.5</sub>
						</li>
						<li onclick='selectHJ("pm10")'>PM <sub>10</sub></li>
						<li onclick='selectHJ("so2")'>SO <sub>2</sub></li>
						<li onclick='selectHJ("no2")'>NO <sub>2</sub></li>
						<li onclick='selectHJ("o3")'>O <sub>3</sub></li>
						<li onclick='selectHJ("co")'>CO </li>
					</ul>
				</div>
				<!-- c徽州区的风向图 -->
				<div class='iconList'>
					<div class='icon' onclick='changeFL()'>
						<img class='fenli' src="./picture/fenxiang2.png">
					</div>
				</div>
				<!-- 全国的风向图 -->
				<div class='iconList' style='display: none;'>
					<div class='icon' onclick='changeFLQG()'>
						<img class='fenli' src="./picture/fenxiang2.png">
					</div>
					<div class='icon' onclick='changeRLQG()'>
						<img class='reli' src="./picture/reli2.png">
					</div>
					<div class='icon' onclick='changeYunQG()'>
						<img class='yun' src="./picture/233.png">
					</div>
				</div>
			</div>

		</div>
		<div class='rightFix'>
			<div class='rightPart1'>
				<div class='part1' onclick='openImg1Tap()'>
					<img id='openImg1' src="./picture/jia1.png">
				</div>
				<div class='part2' onclick='openImg2Tap()'>
					<img id='openImg2' src="./picture/jian1.png">
				</div>
			</div>

		</div>
		<div class='botFix'>
			<img class='type1Icon' src="./picture/1054.png">
			<img class='type2Icon' src="./picture/1078.png">

		</div>
		<!-- loading -->
		<div class="loading">
			<img src="./picture/you.png">
		</div>
		<div id="container" tabindex="0"></div>

		<!-- 引入jquery -->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<!-- // 引入 uni-app 的 sdk -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<!-- <script src="./data.js"> </script> -->
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=1.4.15&key=5160196634a68d48d498858eff7fa581&plugin=AMap.MapType">
		</script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/amap-wind/dist/amap-wind.js"></script>


		<script type="text/javascript">
			var url = '/environment-air'
			var token = getQuery('token')
			// console.log('token==',token)
			function getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				console.log(r);
				if (r != null) {
					// 对参数值进行解码
					return decodeURIComponent(r[2]);
				}
				return null;
			}

			let data = []
			//查询企业检测指标详情--查看全部（只有厂界和排口）
      // console.log(token);
			function getCityData() {
        console.log(token);
				$.ajax({
					type: "GET",
					url: url+"/app/homepage/enterpriseAnalysisMore",
					headers:{'Authorization':'Bearer '+token},
					dataType: "json",
					success: function(res) {
            console.log(res);
						if (res.success) {
							data = res.data
							// console.log('success', res)
							eachMore(2)
							//js 方法
							var html = `<li onclick='allCompany()'>全部企业</li>`
							for (var j = 0; j < data.list.length; j++) {
								let info = JSON.stringify(data.list[j])
								html += `<li onclick='selectCompany(${info})'>` + data.list[j].name + `</li>`
							}
							document.getElementById('ul').innerHTML = html
						} else {
							// console.log('err', data)
						}
					},
					error: function(jqXHR) {
						// console.log('error', jqXHR)
						// aler("发生错误：" + jqXHR.status);
					}
				});
			}
			getCityData()
			//查询全国-城市空气质量
			var countryList = []

			function countryData() {
				let date = new Date()
				let time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
				console.log(time)
				$.ajax({
					type: "GET",
					url: url+"/bigscreen/supervisePlat/cityAqiHour",
					headers:{'Authorization':'Bearer '+token},
					dataType: "json",
					data: {
						time: time
					},
					success: function(res) {
						if (res.success) {
							console.log('success', res)
							countryList = res.data.data
							$('.loading')[0].style.display = 'none'
							countryeach('aqi')
						} else {
							console.log('err', data)
						}
					},
					error: function(jqXHR) {
						// aler("发生错误：" + jqXHR.status);
					}
				});
			}
			// countryData()
			// console.log('aaaa',aaaa.responseText);
			// data = JSON.parse(aaaa.responseText).data.list
			var map = new AMap.Map('container', {
				resizeEnable: true,
				center: [118.336751, 29.827279],
				mapStyle: 'amap://styles/487d6c079d0be1880cdee002397f9462',
				zoom: 13
			});

			//获取边界坐标点
			AMap.plugin('AMap.DistrictSearch', () => {
				var district = new AMap.DistrictSearch({
					// 关键字对应的行政区级别，共有5种级别
					level: 'district',
					//  是否显示下级行政区级数，1表示返回下一级行政区
					subdistrict: 1,
					extensions: 'all', //返回行政区边界坐标组等具体信息
					showbiz: false
				})
				let cityCode = "341004"; //注意这个参数必须是字符串,要不然显示不出来的
				district.search(cityCode, function(status, result) {
					if (status === 'complete') {
						// 绘制区域
						getData(result.districtList[0]);
					}
				});

			})
			let polygons = []; //绘制区域面积图的数组
			function getData(data) {
				var bounds = data.boundaries;
				if (bounds) {
					for (var i = 0, l = bounds.length; i < l; i++) {
						var polygon = new AMap.Polygon({
							map: map,
							strokeWeight: 1,
							strokeColor: '#0091ea',
							fillColor: '#80d8ff',
							fillOpacity: 0.2,
							path: bounds[i],
							strokeStyle: 'dashed'
						});
						polygons.push(polygon);
					}
					// map.setFitView(); //地图自适应、、会影响缩放层级
				}
			}
			/**
			 * 步奏6中的polygons[] 就是我们绘制的区域数据,去过不需要的话,可以用for循环设置为空,就清除可
			 */
			for (var i = 0, l = polygons.length; i < l; i++) {
				polygons[i].setMap(null);
			}

			var markers = []

			function eachMore(index) {
				removeMarkers()
				console.log('datadata',data)
				for (var i = 0; i < data.list.length; i++) {
					// 1 排口  2 厂界
					if (index == 1) {
						var type = data.list[i].map.hjgc01.state
						var span = data.list[i].map.hjgc01.value

					} else {

						var type = data.list[i].map.hjgc05.state
						var span = data.list[i].map.hjgc05.value
					}

					if (type == 0) {
						var text = `<div class='iconText '>
							<img src="./picture/hui3.png" >
						</div>`
					} else if (type == 1) {
						var text =
							`<div class='iconText '>
							<div class='icontx1 nan'>
								${span}
							</div>
							<img src="./picture/lan3.png" >
						</div>`
					} else if (type == 2) {
						var text =
							`<div class='iconText '>
							<div class='icontx1 huang'>
								${span}
								</div>
							<img src="./picture/huang3.png" >
						</div>`
					} else if (type == 3) {
						var text =
							`<div class='iconText '>
							<div class='icontx1 hong'>
								${span}</div>
							<img src="./picture/hong3.png" >
						</div>`
					}

					var marker = new AMap.Marker({
						position: new AMap.LngLat(Number(data.list[i].longitude), Number(data.list[i].latitude)),
						// 将一张图片的地址设置为 icon
						// icon: type == 0 ? Icon1 : type == 1 ? Icon2 : Icon3,
						content: text, // 自定义点标记覆盖物内容
						// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
						// offset: new AMap.Pixel(-13, -30)
					});
					// 将标注添加到地图
					map.add(marker);

					//给marker添加点击事件
					marker.on('click', this.showInfoM)
					let company_id = data.list[i].id
					marker.setExtData({
						id: company_id
					})
					markers[i] = marker
					// console.log(data.list[i])
					// marker.on('click', showInfoM);
					// // console.log('markers[i]',markers)
					//            markers[i].addEventListener('click', function(){


					//            });   

				}
			}
			// 渲染全国环境指标数据
			function countryeach(type) {
				removeMarkers()
				for (var i = 0; i < countryList.length; i++) {
					var status = countryList[i].data[0].quality
					if (type == 'aqi') {
						var span = countryList[i].data[0].aqi
					} else if (type == 'co') {
						var span = countryList[i].data[0].co
					} else if (type == 'no2') {
						var span = countryList[i].data[0].no2
					} else if (type == 'o3') {
						var span = countryList[i].data[0].o3
					} else if (type == 'pm2_5') {
						var span = countryList[i].data[0].pm2_5
					} else if (type == 'pm10') {
						var span = countryList[i].data[0].pm2_5
					} else if (type == 'so2') {
						var span = countryList[i].data[0].pm2_5
					}
					if (status == '优') {
						var text =
							`<div class='iconText2 '>
							<div class='icontx1 zcIcon'>
								${span}
							</div>
							<img src="./picture/1072.png" >
						</div>`
					} else if (status == '良') {
						var text =
							`<div class='iconText2 '>
							<div class='icontx1 lIcon'>
								${span}
							</div>
							<img src="./picture/1073.png" >
						</div>`
					}
					// var text =
					// 	`<div class='iconText '>
					// 	<div class='icontx1 nan'>
					// 		${span}
					// 	</div>
					// 	<img src="./picture/lan3.png" >
					// </div>`
					// if (type == 0) {
					// 	var text = `<div class='iconText '>
					// 		<img src="./picture/hui3.png" >
					// 	</div>`
					// } else if (type == 1) {
					// 	var text =
					// 		`<div class='iconText '>
					// 		<div class='icontx1 nan'>
					// 			${span}
					// 		</div>
					// 		<img src="./picture/lan3.png" >
					// 	</div>`
					// } else if (type == 2) {
					// 	var text =
					// 		`<div class='iconText '>
					// 		<div class='icontx1 huang'>
					// 			${span}
					// 			</div>
					// 		<img src="./picture/huang3.png" >
					// 	</div>`
					// } else if (type == 3) {
					// 	var text =
					// 		`<div class='iconText '>
					// 		<div class='icontx1 hong'>
					// 			${span}</div>
					// 		<img src="./picture/hong3.png" >
					// 	</div>`
					// }

					var marker = new AMap.Marker({
						position: new AMap.LngLat(Number(countryList[i].longitude), Number(countryList[i].latitude)),
						// 将一张图片的地址设置为 icon
						// icon: type == 0 ? Icon1 : type == 1 ? Icon2 : Icon3,
						content: text, // 自定义点标记覆盖物内容
						// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
						offset: new AMap.Pixel(-13, -30)
					});
					// 将标注添加到地图
					map.add(marker);

					//给marker添加点击事件
					// marker.on('click', this.showInfoM)
					// let company_id = data.list[i].id
					// marker.setExtData({
					// 	id: company_id
					// })
					markers[i] = marker


				}
			}

			function showInfoM(e) {
				// document.querySelector("#text").innerText = text;
				let id = e.target.getExtData().id
				let data = {
					company_id: id,
				};
				console.log("给 uni-app 发送数据", data);
				uni.postMessage({
					data: data,
				});

			}


			var TypeText = document.getElementsByClassName('text')[0]
			//展开列表
			function openList() {
				closeCity()
				var topFixList = document.getElementsByClassName('topFixList')[0]
				if (topFixList.style.height == '230px') {
					topFixList.style.height = 0
					// if(text.innerText=='排口'){
					// 	this.eachMore(1)
					// }else{
					// 	this.eachMore(2)
					// }
				} else if (topFixList.style.height == '0px' || topFixList.style.height == '') {
					topFixList.style.height = '230px'
				}
				clearAll()

			}
			// 所有城市
			function allCompany() {
				// 1 排口  2 厂界
				if (TypeText.innerText == '排口') {
					this.eachMore(1)

				} else {
					this.eachMore(2)
				}
			}
			//选择城市
			function selectCompany(e) {
				removeMarkers()
				closeList()
				// map.remove(marker)
				// 
				// 1 排口  2 厂界
				if (TypeText.innerText == '排口') {
					var type = e.map.hjgc01.state
					var span = e.map.hjgc01.value

				} else {
					var type = e.map.hjgc05.state
					var span = e.map.hjgc05.value
				}

				if (type == 0) {
					var text = `<div class='iconText '>
						<img src="./picture/hui3.png" >
					</div>`
				} else if (type == 1) {
					var text =
						`<div class='iconText '>
						<div class='icontx1 nan'>
							${span}
						</div>
						<img src="./picture/lan3.png" >
					</div>`
				} else if (type == 2) {
					var text =
						`<div class='iconText '>
						<div class='icontx1 huang'>
							${span}
							</div>
						<img src="./picture/huang3.png" >
					</div>`
				} else if (type == 3) {
					var text =
						`<div class='iconText '>
						<div class='icontx1 hong'>
							${span}</div>
						<img src="./picture/hong3.png" >
					</div>`
				}

				var marker = new AMap.Marker({
					position: new AMap.LngLat(Number(e.longitude), Number(e.latitude)),
					// 将一张图片的地址设置为 icon
					// icon: type == 0 ? Icon1 : type == 1 ? Icon2 : Icon3,
					content: text, // 自定义点标记覆盖物内容
					// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
					// offset: new AMap.Pixel(-13, -30)
				});
				// 将标注添加到地图
				map.add(marker);
				var position = new AMap.LngLat(Number(e.longitude), Number(e.latitude));
				map.setCenter(position)
				$('.QYtext')[0].innerHTML = e.name
				//给marker添加点击事件
				marker.on('click', this.showInfoM)
				let company_id = e.id
				marker.setExtData({
					id: company_id
				})
				markers.push(marker)
			}

			function removeMarkers() {
				map.remove(markers);

			}

			function closeList() {
				var topFixList = document.getElementsByClassName('topFixList')[0]
				topFixList.style.height = 0
			}
			//厂界于排口点击
			function selectType() {
				var right1_type = document.getElementById('right1_type')
				if (right1_type.style.height == '0px' || right1_type.style.height == '') {
					right1_type.style.height = 60 + 'px'
				} else {
					right1_type.style.height = 0
				}
				closeList()
				closeCity()
			}
			// 关厂界下拉
			function clearAll() {
				var right1_type = document.getElementById('right1_type')
				right1_type.style.height = 0
			}

			// 当前城市的文字
			//全国于徽州地区切换
			function TypeQG() {

				// 
				var TypeQG = document.getElementById('TypeQG')
				var text = document.getElementsByClassName('city_text')
				var type2Icon = document.getElementsByClassName('type2Icon')[0]
				var type1Icon = document.getElementsByClassName('type1Icon')[0]
				if (text[0].innerHTML == '全国') {
					return
				}
				$('.QGtext')[0].innerHTML = "AQI"
				console.log('countryList', countryList.length)
				if (countryList.length == 0) {
					countryData()
					$('.loading')[0].style.display = 'flex'
				}
				// 影藏厂界 企业列表于风向图
				$('.right1')[0].style.display = 'none'
				$('.right2')[0].style.display = 'none'
				$('.iconList')[0].style.display = 'none'
				$('.QYtext')[0].innerHTML = '企业列表'
				// 影藏云图
				if (imageLayer !== '') {
					imageLayer.hide()
				}
				if (imageLayerRL !== '') {
					imageLayerRL.hide()
				}
				if (imageLayerFX !== '') {
					imageLayerFX.hide()
				}
				this.huiIcon = 0
				//显示 环境列表 锋利图
				$('.right2')[1].style.display = 'flex'
				$('.iconList')[1].style.display = 'block'

				clearIconActive()
				text[0].innerHTML = TypeQG.innerHTML
				type2Icon.style.display = 'block'
				type1Icon.style.display = 'none'
				map.setZoomAndCenter(4, [116.205467, 39.907761])
				closeCity()
				countryeach('aqi')
			}

			function TypeHZ() {

				var TypeHZ = document.getElementById('TypeHZ')
				var text = document.getElementsByClassName('city_text')
				var type2Icon = document.getElementsByClassName('type2Icon')[0]
				var type1Icon = document.getElementsByClassName('type1Icon')[0]
				if (text[0].innerHTML == '徽州区') {
					closeCity()
					return
				}
				if (imageLayer !== '') {
					imageLayer.hide()
				}
				if (imageLayerRL !== '') {
					imageLayerRL.hide()
				}
				if (imageLayerFX !== '') {
					imageLayerFX.hide()
				}
				// 显示厂界 企业列表于风向图
				$('.right1')[0].style.display = 'block'
				$('.right2')[0].style.display = 'flex'
				$('.iconList')[0].style.display = 'block'
				//影藏 环境列表 锋利图
				$('.right2')[1].style.display = 'none'
				$('.iconList')[1].style.display = 'none'

				clearIconActive()
				QGflIcon = 0

				text[0].innerHTML = TypeHZ.innerHTML
				TypeText.innerText = '厂界'
				type2Icon.style.display = 'none'
				type1Icon.style.display = 'block'
				map.setZoomAndCenter(13, [118.336751, 29.827279])
				eachMore(2)
				closeCity()
			}
			//关闭城市切换下拉
			function closeCity() {
				var cityChange = document.getElementsByClassName('cityChange')
				cityChange[0].style.height = 0
			}
			//打开于关闭城市下拉
			function TapchangeCity() {
				var cityChange = document.getElementsByClassName('cityChange')[0]
				if (cityChange.style.height == '0px' || cityChange.style.height == '') {
					cityChange.style.height = 60 + 'px'
				} else {
					cityChange.style.height = 0
				}
				//
				closeList()
				clearAll()
				closeQGList()
			}

			//选择厂界于排口
			function TypeCJ() {
				var TypeCJ = document.getElementById('TypeCJ')
				var text = document.getElementsByClassName('text')
				text[0].innerHTML = TypeCJ.innerHTML
				$('.QYtext')[0].innerHTML = '企业列表'
				this.selectType()
				this.eachMore(2)
				closeList()
			}

			function TypePK() {
				var TypePK = document.getElementById('TypePK')
				var text = document.getElementsByClassName('text')
				text[0].innerHTML = TypePK.innerHTML
				$('.QYtext')[0].innerHTML = '企业列表'
				this.selectType()
				this.eachMore(1)
				closeList()
			}

			//切换普通地图和卫星地图
			// function setMap1() {
			// 	mapType = 1
			// 	map.setMapType(BMAP_NORMAL_MAP);
			// 	editMapType()
			// 	closeList()
			// 	clearAll()

			// }

			// function setMap2() {
			// 	mapType = 2
			// 	map.setMapType(BMAP_SATELLITE_MAP);
			// 	editMapType()
			// 	closeList()
			// 	clearAll()
			// }
			//修改样式
			// function editMapType() {
			// 	var mapType1 = document.getElementById('mapType1')
			// 	var mapType1Box = document.getElementById('mapType1Box')
			// 	var mapType2 = document.getElementById('mapType2')
			// 	var mapType2Box = document.getElementById('mapType2Box')
			// 	if (mapType == 1) {
			// 		mapType1.src = './picture/ptdtb.png'
			// 		mapType2.src = './picture/vxdt.png'
			// 		mapType1Box.classList.add('bulr')
			// 		mapType2Box.classList.remove('bulr')
			// 	}
			// 	if (mapType == 2) {
			// 		mapType1.src = './picture/ptdt.png'
			// 		mapType2.src = './picture/vxdtb.png'
			// 		mapType1Box.classList.remove('bulr')
			// 		mapType2Box.classList.add('bulr')
			// 	}
			// }
			//缩放
			var openImg1 = document.getElementById('openImg1')
			var openImg2 = document.getElementById('openImg2')

			function openImg1Tap() {
				var zoom = map.getZoom(); //获取当前地图级别
				map.setZoom(zoom >= 18 ? 18 : zoom + 1)
				var part1 = document.getElementsByClassName('part1')
				openImg1.src = './picture/jia2.png'
				part1[0].style.background = '#4EA1FF'
				setTimeout(() => {
					openImg1.src = './picture/jia1.png'
					part1[0].style.background = '#ffffff'
				}, 150)
				closeList() //城市类别关闭
				clearAll() //排口于厂界关闭
				closeCity() //全国切换关闭
				closeQGList()
			}

			function openImg2Tap() {
				var zoom = map.getZoom(); //获取当前地图级别
				var part2 = document.getElementsByClassName('part2')
				openImg2.src = './picture/jian2.png'
				part2[0].style.background = '#4EA1FF'
				setTimeout(() => {
					openImg2.src = './picture/jian1.png'
					part2[0].style.background = '#ffffff'
				}, 150)
				map.setZoom(zoom <= 3 ? 3 : zoom - 1)
				closeList()
				clearAll()
				closeCity() //全国切换关闭
				closeQGList()
			}

			// function openImg3Tap() {
			// 	openImg1.src = './picture/rlt.png'
			// 	openImg2.src = './picture/ft.png'
			// 	openImg3.src = './picture/ytl.png'
			// 	closeList()
			// 	clearAll()
			// }
			var huiIcon = 0 //代表徽州区的风向图选中 如果选中则为1 否者为0
			//徽州区风力点击
			function changeFL() {
				var fenli = document.getElementsByClassName('fenli')[0]
				var icon = document.getElementsByClassName('icon')[0]
				console.log(fenli.src)
				if (huiIcon == 0) {
					huiIcon = 1
					fenli.src = './picture/fenxiang1.png'
					icon.style.background = '#4EA1FF'
					// hzUrlFX()
					TapFX()
				} else {
					huiIcon = 0
					fenli.src = './picture/fenxiang2.png'
					icon.style.background = '#ffffff'
					windLayer.hide()
				}

			}
			//打开环境参数选择列表
			function openQGList() {
				var topFixList = document.getElementsByClassName('topFixList')[1]
				if (topFixList.style.height == '230px') {
					topFixList.style.height = 0
				} else if (topFixList.style.height == '0px' || topFixList.style.height == '') {
					topFixList.style.height = '230px'
				}
			}
			//收取列表
			function closeQGList() {
				var topFixList = document.getElementsByClassName('topFixList')[1]
				topFixList.style.height = 0
			}

			var RLtextIndex = 'aqi'
			//选择环境
			function selectHJ(e) {
				console.log(e)
				countryeach(e)
				closeQGList()
				RLtextIndex = e
				var textQG = ''

				if (e == 'aqi') {
					textQG = 'AQI'
				} else if (e == 'pm2_5') {
					textQG = `PM <sub>2.5</sub>`
				}
				if (e == 'co') {
					textQG = 'CO'
				}
				if (e == 'no2') {
					textQG = `NO <sub>2</sub>`
				}
				if (e == 'o3') {
					textQG = `O <sub>3</sub>`
				}
				if (e == 'pm10') {
					textQG = `PM <sub>10</sub>`
				}
				if (e == 'so2') {
					textQG = `SO <sub>2</sub>`
				}
				$('.QGtext')[0].innerHTML = textQG

			}

			// 风向图
			var FXURL = ''
			function imgFX() {
				$.ajax({
					type: "GET",
					url: url+"/app/homepage/getWindLayer",
					headers:{'Authorization':'Bearer '+token},
					dataType: "json",
					success: function(res) {
            console.log(res);
						if (res.success) {
							FXURL = res.data.data
							console.log('FXURL', res.data, Array.isArray(FXURL))
						} else {
							console.log('err', data)
						}
					},
					error: function(jqXHR) {
						// aler("发生错误：" + jqXHR.status);
					}
				});

			}
			imgFX()
			var imageLayerFX = '' //风向图
			function TapFX() {
				console.log('FXURL', FXURL)

				var windLayer = new AMapWind.WindLayer(FXURL, {
					windOptions: {
						colorScale: [
							"rgb(36,104, 180)",
							"rgb(60,157, 194)",
							"rgb(128,205,193 )",
							"rgb(151,218,168 )",
							"rgb(198,231,181)",
							"rgb(238,247,217)",
							"rgb(255,238,159)",
							"rgb(252,217,125)",
							"rgb(255,182,100)",
							"rgb(252,150,75)",
							"rgb(250,112,52)",
							"rgb(245,64,32)",
							"rgb(237,45,28)",
							"rgb(220,24,32)",
							"rgb(180,0,35)"
						],
						generateParticleOption: false,
						// velocityScale: 1 / 20,
						// paths: 5000,
						lineWidth: 1,
						// frameRate: 16,
						// maxAge: 60,
						// globalAlpha: 0.9,
						// velocityScale: 1 / 20,
						// paths: 10000,
						// paths: () => { // can be number or function
						// 	const zoom = map.getZoom();
						// 	return zoom * 1000;
						// },
					},
					zIndex: 20,
					// map:map
				})
				// console.log(windLayer,map);
				windLayer.appendTo(map);
			}

			//云图
			var YunURL = ''

			function imgYun() {
				$.ajax({
					type: "GET",
					url: url+"/app/homepage/getDataGis",
					headers:{'Authorization':'Bearer '+token},
					dataType: "json",
					success: function(res) {
						if (res.success) {
							YunURL = res.data.url
							console.log('YunURL', YunURL)
						} else {
							console.log('err', data)
						}
					},
					error: function(jqXHR) {
						// aler("发生错误：" + jqXHR.status);
					}
				});
			}
			imgYun()
			var imageLayer = '' //云图
			function hzUrlFX() {
				// 创建图片图层
				imageLayer = new AMap.ImageLayer({
					bounds: new AMap.Bounds(
						[73.446960459, 18.1608963039], [135.0858307079, 53.5579261839]
					),
					url: YunURL, // 图片 Url
					zIndex: 2,
					zooms: [3, 18] // 设置可见级别，[最小级别，最大级别]
				});

				// 将图层添加至地图实例
				map.add(imageLayer);
			}
			//热力图
			var RLURL = url+'/app/homepage/getHeatLayer?index=aqi'
			// function imgRL() {
			// 	$.ajax({
			// 		type: "GET",
			// 		url: "http://47.114.111.108:9020/app/homepage/getHeatLayer",
			// 		data: {
			// 			index: 'aqi',
			// 		},
			// 		dataType: "json",
			// 		success: function(res) {
			// 			if (res.success) {
			// 				RLURL = res.data.url
			// 				console.log('RLURL', RLURL)
			// 			} else {
			// 				console.log('err', data)
			// 			}
			// 		},
			// 		error: function(jqXHR) {
			// 			// aler("发生错误：" + jqXHR.status);
			// 		}
			// 	});

			// }
			// imgRL()
			var imageLayerRL = '' //
			function hzUrlFXRL(text) {
				// let tx1 = ''
				// if(text=='AQI'){
				// 	tx1 = 'aqi'
				// }else if(text =='')
				// 创建图片图层
				imageLayerRL = new AMap.ImageLayer({
					bounds: new AMap.Bounds(
						[73.446960459, 18.1608963039], [135.0858307079, 53.5579261839]
					),
					url: 'http://47.114.111.108:9020/app/homepage/getHeatLayer?index=' + RLtextIndex, // 图片 Url
					zIndex: 3,
					zooms: [3, 18] // 设置可见级别，[最小级别，最大级别]
				});

				// 将图层添加至地图实例
				map.add(imageLayerRL);
			}
			var QGflIcon = 0
			//全国风图点击
			function changeFLQG() {
				var fenli = document.getElementsByClassName('fenli')[1]
				var icon = document.getElementsByClassName('icon')[1]
				console.log(fenli.src)
				if (QGflIcon == 0) {
					QGflIcon = 1
					fenli.src = './picture/fenxiang1.png'
					icon.style.background = '#4EA1FF'
					TapFX()
				} else {
					QGflIcon = 0
					fenli.src = './picture/fenxiang2.png'
					icon.style.background = '#ffffff'
				}
			}
			//热力图点击
			var QGRLIcon = 0

			function changeRLQG() {
				var reli = document.getElementsByClassName('reli')[0]
				var icon = document.getElementsByClassName('icon')[2]
				if (QGRLIcon == 0) {
					QGRLIcon = 1
					reli.src = './picture/reli.png'
					icon.style.background = '#4EA1FF'

					hzUrlFXRL($('.QGtext')[0].innerText)
				} else {
					QGRLIcon = 0
					reli.src = './picture/reli2.png'
					icon.style.background = '#ffffff'
					imageLayerRL.hide()
				}
			}
			//云图点击
			var QGYunIcon = 0

			function changeYunQG() {

				var fenli = document.getElementsByClassName('yun')[0]
				var icon = document.getElementsByClassName('icon')[3]
				console.log(fenli.src)
				if (QGYunIcon == 0) {
					QGYunIcon = 1
					fenli.src = './picture/yun2.png'
					icon.style.background = '#4EA1FF'
					hzUrlFX()
				} else {
					QGYunIcon = 0
					fenli.src = './picture/233.png'
					icon.style.background = '#ffffff'
					imageLayer.hide()
				}

			}
			//清空所有的图标出发效果
			function clearIconActive() {
				QGflIcon = 0
				QGRLIcon = 0
				QGYunIcon = 0
				huiIcon = 0
				$('.yun')[0].src = './picture/233.png'
				$('.icon')[3].style.background = '#ffffff'
				$('.reli')[0].src = './picture/reli2.png'
				$('.icon')[2].style.background = '#ffffff'
				$('.fenli')[1].src = './picture/fenxiang2.png'
				$('.icon')[1].style.background = '#ffffff'
				$('.fenli')[0].src = './picture/fenxiang2.png'
				$('.icon')[0].style.background = '#ffffff'
			}
		</script>
		<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
	</body>



</html>
